/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-14 17:15:35
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-24 22:25:26
 * @FilePath: /three-react/src/pages/Camera/Camera1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'

const state = {}
export default function Page() {
  
  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])

  function render(scene, camera, renderer) {
    // const radius = 100;
    // const geometry = new THREE.CircleGeometry(radius, 12);
    // const material = new THREE.MeshLambertMaterial({
    //   color: 0x00ffff,
    //   wireframe: true,
    // })
    // const circle = new THREE.Mesh(geometry, material);
    // scene.add(circle);

    const geometry1 = new THREE.SphereGeometry(5)
    const material1 = new THREE.MeshLambertMaterial({
      color: 0xffff00,
    })
    const mesh1 = new THREE.Mesh(geometry1, material1);
    const mesh2 = new THREE.Mesh(geometry1, material1);


    // addVectors
    // // 标量
    // const start = new THREE.Vector3(30, 30, 0)
    // // 向量标识从start位置移动的向量
    // const walk = new THREE.Vector3(100, 50, 0)
    // const end = new THREE.Vector3(0,0,0)
    // end.addVectors(start, walk)
    // console.log(start, walk, end)

    // // add 
    // // 标量
    // const start = new THREE.Vector3(30, 30, 0)
    // // 向量标识从start位置移动的向量
    // const walk = new THREE.Vector3(100, 50, 0)
    // const end = start.clone().add(walk)
    // end.addVectors(start, walk)
    // console.log(start, walk, end)

    // add 
    // 标量
    // const start = new THREE.Vector3(30, 30, 0)
    // const end = start.clone().addScalar(50)

    // console.log(start,end)
    // mesh1.position.copy(start)
    // mesh2.position.copy(end)


    

    scene.add(mesh1)
    scene.add(mesh2)


    // 向量的加减乘除

    const start = new THREE.Vector3(30, 30, 0);
    const walk = new THREE.Vector3(100, 50, 0);

    console.log('-----加-----')
    console.log('add:',start.clone().add(walk));
    console.log('addScalar:',start.clone().addScalar(10));
    console.log('addScaledVector:',start.clone().addScaledVector(walk, 10));
    console.log('addVectors:',start.clone().addVectors(walk, new THREE.Vector3(10,10,10)));

    console.log('-----减-----')
    console.log('sub:', start.clone().sub(walk));
    console.log('subScalar:', start.clone().subScalar(10));
    console.log('subVectors:', start.clone().subVectors(walk, new THREE.Vector3(10,10,10)));
  
    console.log('-----乘-----')
    console.log('multiply:', start.clone().multiply(walk));
    console.log('multiplyScalar:', start.clone().multiplyScalar(10));
    console.log('multiplyVectors:', start.clone().multiplyVectors(walk, new THREE.Vector3(10,10,10)));

    console.log('-----除-----')
    console.log('divide:', start.clone().divide(walk));
    console.log('divideScalar:', start.clone().divideScalar(10));

    console.log('-----点积-----')
    console.log('dot:', start.clone().dot(walk));

    console.log('-----叉积-----')
    console.log('cross:', start.clone().cross(walk));
    console.log('crossVectors:', start.clone().crossVectors(walk, new THREE.Vector3(10,10,10)));

  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}